<template>
  <u-overlay
    :opacity="0.8"
    :show="show"
  >
    <view class="warp">
      <!-- <canvas
        id="firstCanvas"
        ref="canvas"
        canvas-id="firstCanvas"
        type="2d"
        style="width:500px;height:500px; position: absolute; left:0;top:0; z-index: 100;"></canvas> -->
      <random-drop
        v-if="show"
        :list="mpSucceedAdoptPic"
      ></random-drop>
      <!-- <u--image
        :src="detail.mpSucceedAdoptPic"
        width="100vw"
        class="animate-gif"
        height="100vh"></u--image> -->
      <view
        class="adopt-box flex align-center"
        :class="{ animate: showAnimate }"
      >
        <view class="pass-time">{{ detail.passTime }}</view>
        <u--image
          :src="detail.petAvatar"
          width="96rpx"
          class="pet-avatar"
          height="96rpx"
        ></u--image>
        <view class="adopt-box--desc fz-15">
          庆祝 [{{ detail.userNickname }}] 云认养 [{{ detail.petArea }}]
          猫猫，积功德行好运
        </view>
      </view>
    </view>
  </u-overlay>
</template>

<!-- 首页领养飘屏 -->
<script>
// import lottie from 'lottie-miniprogram';
import { getFloatingScreen } from '@/api/pet-core.js';
import randomDrop from './random-drop';
// let ani = null;
export default {
  components: {
    randomDrop,
  },
  data() {
    return {
      show: false,
      showAnimate: false,
      detail: {
        userNickname: '',
        petAvatar: '',
        petArea: '',
        passTime: '',
        mpSucceedAdoptPic: '',
        // mpSucceedAdoptPic: '["https://cdn-dev.findapet.com.cn/1714374047502招财.png","https://cdn-dev.findapet.com.cn/1714374047519元宝.png"]',
        // mpSucceedAdoptPic: '["https://cdn-dev.findapet.com.cn/1714374030549云彩.png"]',
        // mpSucceedAdoptPic: '["https://cdn-dev.findapet.com.cn/1714374066281运气.png","https://cdn-dev.findapet.com.cn/1714374066283吉祥.png","https://cdn-dev.findapet.com.cn/1714374066267中签.png"]',
      },
      animationData: {},
    };
  },
  computed: {
    mpSucceedAdoptPic() {
      if (this.detail.mpSucceedAdoptPic) {
        return JSON.parse(this.detail.mpSucceedAdoptPic);
      } else {
        return [];
      }
    },
  },
  mounted() {
    this.getData();
    // this.animate();
  },
  methods: {
    async getData() {
      try {
        const { data } = await getFloatingScreen();
        this.detail = data || {};
        this.show = !!data;
        // this.show = true;
        this.$nextTick(() => {
          this.animate();
        });
      } catch (e) {
        //TODO handle the exception
        throw new Error(e);
      }
    },
    animate() {
      // 如果未展示，则表示没有数据不需要播放动效
      if (!this.show) return false;
      setTimeout(() => {
        this.showAnimate = this.show;
      }, 1000);
      setTimeout(() => {
        this.show = false;
      }, 5000);
    },
  },
};
</script>

<style lang="scss">
.warp {
  position: relative;
  height: 100%;
}
.adopt-box {
  position: absolute;
  z-index: 5;
  border: 1px solid #ffe395;
  border-radius: $border-radius;
  width: 80%;
  height: 120rpx;
  right: -100%;
  bottom: 5%;
  box-shadow: inset 0 0 20px rgb(255 227 149 / 30%);
  box-sizing: border-box;
  padding: 0 10rpx;
  transition: all 7s linear;
  .pet-avatar {
    border-radius: $border-radius;
    overflow: hidden;
    flex-shrink: 0;
  }
  .adopt-box--desc {
    color: #ffe395;
    padding-left: 20rpx;
  }
}
.pass-time {
  position: absolute;
  right: 0;
  top: -44rpx;
  color: #ffe395;
  font-size: 20rpx;
  opacity: 0.7;
}
.animate {
  bottom: 80%;
  right: 90%;
}
.animate-gif {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
</style>
